<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>Model - iThreeJs</title>
		<style type="text/css">
			html, body {margin:0;padding:0;}
			.container {margin:30px auto;padding:20px;width:800px;border:1px solid #ddd;}
			h3, p {line-height:1.5em;font-size:14px;}
			h3 {text-align:center;}
			img {max-width:100%;}
		</style>
	</head>
	
	<body>
		<div class="container">
			<h3>外部模型 Model</h3>
			<p>使用常见几何体组合复杂的模型会比较麻烦，可以先通过3dx Max等工具制作三维模型，然后导入到ThreeJS的场景中</p>
			<p>导入模型需要相应的加载器，例如：</p>
			<ul>
				<li><p>3MFLoader.js 导入.3mf格式的3D文件</p></li>
				<li><p>OBJLoader.js 导入.obj格式的3D文件</p></li>
				<li><p>MTLLoader.js 导入.mtl格式的材质文件</p></li>
			</ul>
			<p>ThreeJS支持的加载器包括：</p>
			<p><img src="pic/model-loaders.jpg" /></p>
			<p>使用3dx Max制作模型，在导出*.obj时可选择是否带材质*.mtl</p>
			<p><img src="pic/model01.jpg" /></p>
			<p>使用OBJLoader导入不带材质的模型</p>
			<p><img src="pic/model02.jpg" /></p>
			<p>导入不带材质的模型后，可在代码中另设置其材质</p>
			<p><img src="pic/model03.jpg" /></p>
			<p>使用MTLLoader和OBJMTLLoader导入带材质的模型</p>
			<p><img src="pic/model04.jpg" /></p>
		</div>
	</body>
</html>